const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
// const webpack = require('webpack');

module.exports = {
  mode:'development',
  entry:{
    main:'./src/app.js',
    b:'./src/b.js'
  },
  devtool:'inline-source-map',
  // devServer:{
  //   contentBase:'./dist',
  //   hot:true,
  // },
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
        include:/components/,
        use:['babel-loader']
      },
      {
        test:/\.css$/,
        use:['style-loader',
          {
            loader:'css-loader',
            options:{
              importLoaders:1
            }
          },
          {
            loader:'postcss-loader',
            options:{
              ident:'postcss',
              plugins:(loader)=>[
                require('autoprefixer')({
                  browsers:[
                    '> 1%',
                    'last 5 versions',
                    'not ie <= 8',
                    'ios >= 6',
                    'android >= 4.0'
                  ]
                })
              ]
            }
          },
        ]
      },
      {
        test:/\.styl$/,
        exclude:/node_modules/,
        use:[MiniCssExtractPlugin.loader,'css-loader',
        {
          loader:'postcss-loader',
          options:{
            ident:'postcss',
            plugins:(loader)=>[
              require('autoprefixer')({
                browsers:[
                  '> 1%',
                  'last 5 versions',
                  'not ie <= 8',
                  'ios >= 6',
                  'android >= 4.0'
                ]
              })
            ]
          }
        },'stylus-loader']
      },
      {
        test:/\.(png|jpg|gif|svg)$/i,
        use:[
          {
            loader:'file-loader',
            options:{
              name:'assets/[name]-[hash:5].[ext]'
            }
          }
        ]
      },
      // {
      //   test:/\.(png|jpg|gif|svg)$/i,
      //   use:[
      //     {
      //       loader:'url-loader',
      //       options:{
      //         limit:300000,
      //       }
      //     }
      //   ]
      // },
      {
        test:/\.html$/,
        exclude:/node_modules/,
        include:/components/,
        use:['html-loader']
      }
    ]
  },
  plugins:[
    new CleanWebpackPlugin(['dist/*'],{
      root:path.resolve(__dirname,'../')
    }),
    new HtmlWebpackPlugin({
      filename:'index.html',
      template:'./src/index.html',
      inject:'body',
      title:'webpack app111',
      chunks:['main']
    }),
    new AddAssetHtmlPlugin({ 
      filepath: './src/components/layer/layer.js',
      outputPath:'./js'
    }),
    new CopyWebpackPlugin([ //支持输入一个数组
      {
        from: './src/b.js', //将src/assets下的文件
        to: './js' // 复制到publiv
      }
    ]),
    new MiniCssExtractPlugin({
      filename:'css/style.css'
    })
    // new webpack.NamedModulesPlugin(),
    // new webpack.HotModuleReplacementPlugin(),
  ],
  output:{
    filename:'js/[name].bundle.js',
    path:path.resolve(__dirname,'dist'),
    // publicPath:'http:www/'  //加在script引用js前面的字符串
  },
  resolve:{
    extensions:['.js'],
    modules:[path.resolve(__dirname,'../src/lib')],
    alias:{
      "sub":"../src/lib/components.js"
    }
  }
}